<x-admin.layout>
    <x-slot:title>
        {{ $title}}
    </x-slot:title>
    <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
        <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">登录</h2>

            <form method="POST" action="{{ route('admin.login.post') }}" class="space-y-6">
                @csrf

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">邮箱</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autofocus
                        class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white @error('email') border-red-500 dark:border-red-400 @enderror"
                        placeholder="请输入邮箱"
                    />
                    @error('email')
                        <div class="mt-1 px-3 py-2 text-sm text-white bg-red-500 rounded-md dark:bg-red-700 dark:text-red-100">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">密码</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        required
                        class="w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white @error('password') border-red-500 dark:border-red-400 @enderror"
                        placeholder="请输入密码"
                    />
                    @error('password')
                        <div class="mt-1 px-3 py-2 text-sm text-white bg-red-500 rounded-md dark:bg-red-700 dark:text-red-100">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <div>
                    <label for="captcha" class="block text-sm font-medium text-gray-700 dark:text-gray-300">验证码</label>
                    <div class="flex mt-1">
                        <input
                            type="text"
                            id="captcha"
                            name="captcha"
                            required
                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white @error('captcha') border-red-500 dark:border-red-400 @enderror"
                            placeholder="请输入验证码"
                        />
                        <img src="{{ captcha_src('default') }}" id="captcha_img" title="点击刷新" alt="验证码" class="cursor-pointer rounded-r-lg border border-l-0 border-gray-300 dark:border-gray-600 h-[42px] @error('captcha') border-red-500 dark:border-red-400 @enderror">
                    </div>
                    @error('captcha')
                        <div class="mt-1 px-3 py-2 text-sm text-white bg-red-500 rounded-md dark:bg-red-700 dark:text-red-100">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember_me" name="remember" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 focus:ring-blue-500">
                        <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">记住我</label>
                    </div>
                </div>

                <div>
                    <button
                        type="submit"
                        class="w-full px-4 py-2 font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-offset-gray-800"
                    >
                        登录
                    </button>
                </div>
            </form>
            <p class="text-sm text-center text-gray-600 dark:text-gray-400">
                还没有账户? <a href="{{route('admin.register')}}" class="font-medium text-blue-600 hover:underline dark:text-blue-400 dark:hover:underline-blue-300">去注册</a>
            </p>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const captchaImg = document.getElementById('captcha_img');
            if (captchaImg) {
                captchaImg.addEventListener('click', function () {
                    this.src = "{{ captcha_src('default') }}?" + Math.random();
                });
            }
        });
    </script>
    @endpush
</x-admin.layout>
